<template>
    <div id="pagination">
        <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total="pageTotal"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'pagination',
    props: {
        pageSize: {
            type: Number,
            value: 10
        },
        currentPage: {
            type: Number,
            value: 1
        },
        pageTotal: {
            type: Number,
            value: 0
        }
    },
    watch: {
        pageSize: {
            hanlder: function (val) {
                this.pageSize = val
            },
            deep: true
        },
        currentPage: {
            hanlder: function (val) {
                this.currentPage = val
            },
            deep: true
        },
        pageTotal: {
            hanlder: function (val) {
                this.pageTotal = val
            },
            deep: true
        }
    },
    data () {
        return {
            pageCurrent: 1
        }
    },
    methods: {
        handleSizeChange (val) {
            let params = {
                pageSize: val,
                currentPage: this.currentPage
            }
            this.$emit('page-change', params)
        },
        handleCurrentChange (val) {
            if (val) {
                this.pageCurrent = val
            }
            let params = {
                pageSize: this.pageSize,
                currentPage: this.pageCurrent
            }
            this.$emit('page-change', params)
        }
    }
}
</script>
<style lang="stylus">
#pagination
    .el-pagination
        padding 10px 15px
        height 50px
        background #fff
        border-top 1px solid #f0f0f0
</style>
